<template>
	<!-- 财务统计 -->
	<view class="financial_statistics">
		<button class="exportButton" @click="exportExcel">导出Excel</button>
		<!-- 项目数据列表 -->
		<div class="project-list">
			<!-- 表头 -->
			<div class="list-header">
				<span class="header-item">创建日期</span>
				<span class="header-item">项目名称</span>
				<span class="header-item">客户</span>
				<span class="header-item">销售合同</span>
				<span class="header-item">采购合同</span>
				<span class="header-item">项目毛利润</span>
				<span class="header-item">实际收款</span>
				<span class="header-item">公司欠款</span>
				<span class="header-item">项目状态</span>
				<span class="header-item">客户总欠款</span>
				<span class="header-item">公司总欠款</span>
				<span class="header-item">资金余额</span>
				<span class="header-item">资产</span>
			</div>

			<!-- 第一行数据 -->
			<div class="list-row" v-for="(item, index) in tableItems">
				<span class="row-item">{{ new Date(item.createTime).toISOString().split('T')[0] }}</span>
				<span class="row-item">{{ item.projectName }}</span>
				<span class="row-item">{{ item.projectClient }}</span>
				<span class="row-item">{{ item.investmentAmount }}</span>
				<span class="row-item">{{ item.purchaseContract }}</span>
				<span class="row-item profit-negative">{{ item.profit }}</span>
				<span class="row-item">{{ item.publicCollect + item.cashCollect }}</span>
				<span class="row-item">{{ item.accountsPayable }}</span>
				<span class="row-item status-processing">{{ item.state }}</span>
				<span class="row-item">{{ item.clientReceivables }}</span>
				<span class="row-item">{{ item.companyCredit }}</span>
				<span class="row-item">{{ item.balance }}</span>
				<span class="row-item">{{ item.property }}</span>
			</div>
		</div>
	</view>
</template>

<script>
import { excel } from '../../request/excel';
import { request } from '../../request';
export default {
	data() {
		return {
			tableItems: null
		};
	},
	methods: {
		exportExcel() {
			excel('public/excelGeneralLedger', {}, 'GET');
		}
	},
	onLoad() {
		// 等待查询完毕仓库，查询元器件
		request('public/financialAnalysis', {}, 'GET').then((res) => {
			if (res.data.code != 200) {
				this.$message.error('   ' + res.data.msg);
				return;
			}
			this.tableItems = res.data.data;
			console.log(this.tableItems);
		});
	}
};
</script>

<style scoped>
.financial_statistics {
	overflow: visible;
}

.exportButton {
	width: 300rpx;
	background: linear-gradient(180deg, #4080ff, #0040c0);
	border-radius: 10px;
	color: white;
	font-size: 33rpx;
	float: right;
}
/* 项目列表容器 */
.project-list {
	width: 100%;
	margin: 1rem 0;
	border-radius: 0.5rem;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.07);
	overflow: visible;
	background-color: #fff;
	position: relative;
}

/* 表头样式 - 粘性定位优化 */
.list-header {
	display: flex;
	background-color: #f8f9fa;
	border-bottom: 2px solid #e9ecef;
	top: 10;
	z-index: 10;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
	position: sticky;
}

/* 表头单元格 - 宽度分配优化 */
.header-item {
	padding: 0.875rem 0.75rem;
	font-weight: 600;
	color: #495057;
	text-align: left;
	font-size: 0.8125rem;
	white-space: nowrap;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* 按内容重要性分配宽度（13列适配） */
.header-item:nth-child(2) {
	flex: 2;
} /* 项目名称（最长） */
.header-item:nth-child(1),
.header-item:nth-child(3) {
	flex: 1.1;
} /* 创建日期、客户 */
.header-item:nth-child(9) {
	flex: 1;
} /* 项目状态 */
.header-item:nth-child(4),
.header-item:nth-child(5),
.header-item:nth-child(6),
.header-item:nth-child(7),
.header-item:nth-child(8),
.header-item:nth-child(10),
.header-item:nth-child(11),
.header-item:nth-child(12),
.header-item:nth-child(13) {
	flex: 0.9;
} /* 数值类列（紧凑分配） */

/* 数据行样式 */
.list-row {
	display: flex;
	border-bottom: 1px solid #f1f3f5;
	transition: background-color 0.2s ease;
}

/* 隔行变色优化可读性 */
.list-row:nth-child(even) {
	background-color: #fafafa;
}

.list-row:last-child {
	border-bottom: none;
}

.list-row:hover {
	background-color: #f1f3f5;
}

/* 数据单元格样式 */
.row-item {
	padding: 0.875rem 0.75rem;
	color: #343a40;
	font-size: 0.875rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	align-self: center;
}

/* 数据列宽度与表头对应 */
.row-item:nth-child(2) {
	flex: 2;
}
.row-item:nth-child(1),
.row-item:nth-child(3) {
	flex: 1.1;
}
.row-item:nth-child(9) {
	flex: 1;
}
.row-item:nth-child(4),
.row-item:nth-child(5),
.row-item:nth-child(6),
.row-item:nth-child(7),
.row-item:nth-child(8),
.row-item:nth-child(10),
.row-item:nth-child(11),
.row-item:nth-child(12),
.row-item:nth-child(13) {
	flex: 0.9;
}

/* 数值列对齐优化 */
.row-item:nth-child(4),
.row-item:nth-child(5),
.row-item:nth-child(6),
.row-item:nth-child(7),
.row-item:nth-child(8),
.row-item:nth-child(10),
.row-item:nth-child(11),
.row-item:nth-child(12),
.row-item:nth-child(13) {
	text-align: right;
}

/* 状态标签样式 */
.status-processing {
	color: #2563eb;
	font-weight: 500;
	padding: 0.25rem 0.5rem;
	border-radius: 4px;
	background-color: rgba(37, 99, 235, 0.1);
}

/* 利润样式 */
.profit-positive {
	color: #059669;
	font-weight: 500;
}

.profit-negative {
	color: #dc2626;
	font-weight: 500;
}

/* 金额格式化 */
.row-item:nth-child(4)::before,
.row-item:nth-child(5)::before,
.row-item:nth-child(6)::before,
.row-item:nth-child(7)::before,
.row-item:nth-child(8)::before,
.row-item:nth-child(10)::before,
.row-item:nth-child(11)::before,
.row-item:nth-child(12)::before,
.row-item:nth-child(13)::before {
	content: '¥';
	margin-right: 0.25rem;
	color: #6c757d;
	font-weight: normal;
}

/* 负金额特殊处理 */
.profit-negative::before {
	content: '';
}
.profit-negative {
	position: relative;
}
.profit-negative::after {
	/* content: '¥'; */
	position: absolute;
	right: calc(100% - 0.75rem);
	color: #6c757d;
	font-weight: normal;
}

/* 移动端适配（13列场景优化） */
@media (max-width: 768px) {
	.project-list {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* 增加最小宽度确保内容可滚动查看 */
	.list-header,
	.list-row {
		min-width: 1100px;
	}
	.list-header {
		position: sticky;
	}

	/* 缩小移动端内边距，增加显示内容 */
	.header-item,
	.row-item {
		padding: 0.75rem 0.625rem;
		font-size: 0.8125rem;
	}
}

/* 滚动条美化 */
.project-list::-webkit-scrollbar {
	height: 6px;
}
.project-list::-webkit-scrollbar-track {
	background: #f1f3f5;
	border-radius: 3px;
}
.project-list::-webkit-scrollbar-thumb {
	background: #ced4da;
	border-radius: 3px;
}
.project-list::-webkit-scrollbar-thumb:hover {
	background: #adb5bd;
}
</style>
